<template>
  <h5>customRef 的使用</h5>
  <input type="text" v-model="keyword">
  <h5>{{ keyword }}</h5>
</template>
<script lang='ts'>
  import { customRef, defineComponent, ref} from 'vue';
  // import useDebouncedRef from '../hooks/useDebouncedRef'
  //value传进来的数据，不确定类型，使用泛型  delay防抖的间隔时间
  // function useDebouncedRef<T>(value:string,delay=200){
  //   // 准备一个存储定时器额变量
  //   let timeOutID:number
  //   return customRef((track,trigger)=>{
  //     return {
  //       // 返回数据
  //       get(){ 
  //         track()  //告诉vue追踪数据
  //         return value
  //       },
  //       // 设置数据
  //       set(NewValue:T){
  //         clearTimeout(timeOutID) //清除定时器
  //         // 定时器开启
  //         timeOutID = setTimeout(()=>{
  //           value = NewValue
  //           trigger() //告诉vue更新界面
  //         },delay)
  //       }
  //     }
  //   })
  // }
  export default defineComponent({
    name:'CustomRef',
    setup(){
      const keyword = ref('abc')
      // const keyword = useDebouncedRef('abc',500)
      return{
        keyword,
      }
    }
  })
</script>
<style scoped>
</style>